<template>
  <div style="background-color: white;padding: 10px 0 0 30px">
    <div id="workShop">
      <div  style="display: flex;margin-top: 10px;">
        <div>
          <a-radio-group default-value="a" button-style="solid">
            <a-radio-button value="a">
              全部
            </a-radio-button>
            <a-radio-button value="b">
              一纺
            </a-radio-button>
            <a-radio-button value="c">
              二纺
            </a-radio-button>
            <a-radio-button value="d">
              三纺
            </a-radio-button>
            <a-radio-button value="e">
              四纺
            </a-radio-button>
            <a-radio-button value="f">
              五纺
            </a-radio-button>
            <a-radio-button value="f">
              六纺
            </a-radio-button>
          </a-radio-group>
        </div>
        <div style="margin-left: 30px">
          <a-radio-group default-value="a" button-style="solid">
            <a-radio-button value="a">
              定量
            </a-radio-button>
            <a-radio-button value="b">
              车速
            </a-radio-button>
            <a-radio-button value="c">
              产量
            </a-radio-button>
            <a-radio-button value="d">
              电能消耗
            </a-radio-button>
            <a-radio-button value="e">
              吨纱电耗
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </div>
    <div>
      <div style="display: inline-flex;">
        <a-select default-value="3" style="width: 200px;" :options="options">
        </a-select>
      </div>
      <div style="display: inline-flex;margin-left: 30px">
        <a-range-picker @change="onChange" />
      </div>
      <div  style="display: inline-flex;margin-top: 10px;margin-left: 30px">
        <div>
          <a-radio-group default-value="a" button-style="solid">
            <a-radio-button value="a">
              今日
            </a-radio-button>
            <a-radio-button value="b">
              昨日
            </a-radio-button>
            <a-radio-button value="c">
              本周
            </a-radio-button>
            <a-radio-button value="d">
              本月
            </a-radio-button>
            <a-radio-button value="e">
              上个月
            </a-radio-button>
            <a-radio-button value="f">
              近6个月
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <a-row>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:0;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="border-top:1px solid black;border-right:1px solid black;border-bottom:1px solid black;border-left:1px solid black;  padding: 10px 15px;">
            <div>
              清花电量消耗
            </div>
            <div style="margin-top:10px;font-weight: bold;font-size: large">
              81.3
            </div>
            <div style="margin-top:10px;">
              系统数据: 45210
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div>
      <div id="tree"></div>
    </div>
    <div>
      <div id="pieOne"></div>
      <div id="pieTwo"></div>
      <div id="pieThree"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {

    };
  },
  mounted() {
    this.getTreeData()
    this.getPieOneData()
    this.getPieTwoData()
    this.getPieThreeData()
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    getTreeData(){
      var myChart = echarts.init(document.getElementById('tree'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['清花', '梳棉', '并条', '粗纱', '细纱', '络筒', '打包'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '10%',
            data: [81.3, 2514.7, 26.2, 1043.6, 17787.8, 2311.8,23]
          }
        ]
      };
      myChart.setOption(option);
    },
    getPieOneData(){
      var myChart = echarts.init(document.getElementById('pieOne'));
      let option = {
        title: {
          text: '前纺汇总电耗',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 2.22, name: '清花' },
              { value: 68.6, name: '梳棉' },
              { value: 0.71, name: '并条' },
              { value: 28.47, name: '粗纱' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    getPieTwoData(){
      var myChart = echarts.init(document.getElementById('pieTwo'));
      let option = {
        title: {
          text: '细纱汇总电耗',
          left: 'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 12033.8, name: '莱赛尔40S紧赛纺 LJ308066' },
              { value: 1979.9, name: '莱赛尔50S紧赛纺 LJ312955' },
              { value: 3774.1, name: '莱赛尔30S紧赛纺 LJ306088-7' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    },
    getPieThreeData(){
      var myChart = echarts.init(document.getElementById('pieThree'));
      let option = {
        title: {
          text: '络筒汇总电耗',
          left: 'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 578.8, name: '莱赛尔30S紧赛纺 LJ306088-7' },
              { value: 1473.6, name: '莱赛尔40S紧赛纺 LJ308066' },
              { value: 46.3, name: '莱赛尔50S紧赛纺 LJ312955' },
              { value: 213.1, name: '莱赛尔50S紧赛纺  LJ312955' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  },
};
</script>
<style lang="less" scoped>
#tree {
  width: 1500px;
  height: 200px;
  margin-left: -30px;
}
#pieOne {
  width: 450px;
  height: 450px;
  margin: 50px 50px 0 10px;
  display: inline-flex;
}
#pieTwo {
  width: 450px;
  height: 450px;
  margin: 50px 50px 0 50px;
  display: inline-flex;
}
#pieThree {
  width: 450px;
  height: 450px;
  margin: 50px 50px 0 50px;
  display: inline-flex;
}
</style>
